<template>
    <div class="timeTerminal">
        <div class="" style="display: flex;justify-content: space-between;align-items: flex-end">
            <div class="title">
                <span class="bar"></span>
                <span class="text">交易对账</span>
            </div>
            <div>
                <el-button type="primary" icon="Download">导出</el-button>
            </div>
        </div>
        <el-divider />
        <el-form ref="queryRef" :inline="true" label-width="100px">
            <div>
                <el-form-item label="日期: ">
                    <el-radio-group label="size control">
                        <el-radio-button label="large">前1天</el-radio-button>
                        <el-radio-button label="large">前3天</el-radio-button>
                        <el-radio-button label="default">前7天</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-date-picker end-placeholder="结束日期" range-separator="-" start-placeholder="开始日期" type="daterange"
                        value-format="YYYY-MM-DD" />
                </el-form-item>
            </div>

            <el-form-item label="合作伙伴号" prop="payStatus">
                <el-select v-model="value" class="m-2" placeholder="请选择" size="large">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>

            <el-form-item label="交易号" prop="dealNo">
                <el-input placeholder="" clearable />
            </el-form-item>
            <el-form-item label="交易类型" prop="payStatus">
                <el-select v-model="value1" class="m-2" placeholder="请选择交易类型" size="large">
                    <el-option v-for="items in types" :key="items.value1" :label="items.label" :value="items.value1" />
                </el-select>
            </el-form-item>
            <br>
            <el-form-item label="平台商户号" prop="dealNo">
                <el-input placeholder="(6位数字)" clearable />
            </el-form-item>
            <el-form-item label="平台终端号" prop="dealNo">
                <el-input placeholder="(8位数字)" clearable />
            </el-form-item>
            <br>
            <el-form-item label="商户编码" prop="dealNo">
                <el-input placeholder="" clearable />
            </el-form-item>
            <el-form-item label="支付方式" prop="payStatus">
                <el-select v-model="value2" class="m-2" placeholder="请选择交易类型" size="large">
                    <el-option v-for="item in typeOne" :key="item.value2" :label="item.label" :value="item.value2" />
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="Document">查询</el-button>
            </el-form-item>
        </el-form>


        <div class="line">
            <table class="table-list ">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>
                            <div>合作伙伴</div>
                        </th>
                        <th>
                            <div>交易号 <br> 交易类型</div>
                        </th>
                        <th>
                            <div>平台商户号 <br> 平台终端号</div>
                        </th>
                        <th>
                            <div>商户名称 <br> 商户编号</div>
                        </th>
                        <th>
                            <div>终端编号 <br> 支付类型</div>
                        </th>
                        <th>
                            <div>交易金额 <br> 交易时间</div>
                        </th>
                        <th>
                            <div>交易手续费 <br> 付款账号</div>
                        </th>
                        <th>
                            <div>渠道订单号 <br> 系统参考号</div>
                        </th>
                        <th>
                            <div>批次号 <br> 授权码</div>
                        </th>
                        <th>
                            <div>交易备注</div>
                        </th>
                    </tr>

                </thead>
                <tbody>
                    <tr v-for="item in tableData" :key="item.date">
                        <td>{{ item.date }}</td>
                        <td>
                            <div>{{ item.name }}</div>
                        </td>
                        <td>
                            <div>{{ item.address }} <br> <label style="color:#090;font-weight:500;">{{ item.money }}</label>
                            </div>
                        </td>
                        <td>
                            <div>{{ item.num }}<br>{{ item.numOne }}</div>
                        </td>
                        <td>
                            <div>{{ item.nameFood }}<br>{{ item.foodId }}</div>
                        </td>
                        <td>
                            <div>{{ item.numTwo }}<br>{{ item.numThree }}</div>
                        </td>
                        <td>
                            <div><label style="color:#ff6600">￥{{ item.numFore }}</label><br>{{ item.time }}</div>
                        </td>
                        <td>
                            <div><label style="color:#ff6600">￥{{ item.numfive }}</label><br>{{ item.numsix }}</div>
                        </td>
                        <td>
                            <div>{{ item.numsenve }}<br>{{ item.numeight }}</div>
                        </td>
                        <td>
                            <div>{{ item.text }}<br> {{ item.text1 }}</div>
                        </td>
                        <td>
                            <div>{{ item.text2 }}</div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="demo-pagination-block">
            <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" background
                :page-sizes="[5, 10, 20, 50]" :small="small" :disabled="disabled"
                layout="total, sizes, prev, pager, next, jumper" :total="2" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const value = ref('')
const value1 = ref('')
const value2 = ref('')

const options = [
    {
        value: 'Option1',
        label: 'Option1',
    },
    {
        value: 'Option2',
        label: 'Option2',
    }
]
const types = [
    {
        value1: '全部',
        label: '全部',
    },
    {
        value1: '消费',
        label: '消费',
    },
    {
        value1: '撤销',
        label: '撤销',
    },
    {
        value1: '退货',
        label: '退货',
    },
    {
        value1: '预授权请求',
        label: '预授权请求',
    },
    {
        value1: '预授权完成',
        label: '预授权完成',
    },
    {
        value1: '预授权撤销',
        label: '预授权撤销',
    },
    {
        value1: '预授权完成撤销',
        label: '预授权完成撤销',
    },
    {
        value1: '预授权完成退款',
        label: '预授权完成退款',
    }
]
const typeOne = [
    {
        value2: '全部',
        label: '全部',
    },
    {
        value2: '微信',
        label: '微信',
    },
    {
        value2: '支付宝',
        label: '支付宝',
    },
    {
        value2: '银行卡',
        label: '银行卡',
    },
    {
        value2: '银联扫码',
        label: '银联扫码',
    },
    {
        value2: '数字人民币',
        label: '数字人民币',
    },
]
const currentPage4 = ref(4)
const pageSize4 = ref(5)
const small = ref(false)
const disabled = ref(false)
const tableData = [
    {
        date: '1',
        name: '山东冠日丰润信息技术有限公司(300)',
        address: '123400272753',
        money: '消费',
        num: '123726',
        numOne: '12570855',
        nameFood: '山东聚好食供应链管理有限公司',
        foodId: '848451747896000',
        numTwo: '45M03288',
        numThree: '微信',
        time: '2022-11-17 18:24:56',
        numFore: '62.00',
        numfive: '0.14',
        numsix: '--',
        numsenve: '000165',
        numeight: '232118122599',
        text: '221117',
        text1: '',
        text2: '商户GB10000311收款'
    },
    {
        date: '2',
        name: '山东冠日丰润信息技术有限公司(300)',
        address: '123400272753',
        money: '消费',
        num: '524626',
        numOne: '12570855',
        nameFood: '山东聚好食供应链管理有限公司',
        foodId: '848451747896000',
        numTwo: '45M03288',
        numThree: '银行卡(借记卡)',
        time: '2022-11-17 10:14:14',
        numFore: '10,500.00',
        numfive: '20.00',
        numsix: '621793******7961',
        numsenve: '000028',
        numeight: '232110107132',
        text: '000001',
        text1: '',
        text2: ''
    },
]
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}
</script>

<style scoped lang="scss">
.timeTerminal {
    margin: 10px;

    ::v-deep .el-select.el-select--large.m-2 {
        width: 190px !important;
    }

    .title {
        display: flex;
        align-items: center;
        padding-top: 16px;
        padding-left: 16px;

        .bar {
            width: 4px;
            height: 20px;
            background-color: #409eff;
            margin-right: 10px;
        }

        .text {
            font-size: 16px;
            color: #333;
        }
    }

    .demo-pagination-block {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-end;
    }

    .line {
        font-size: 12px;
        text-align: center;

        .table-list {
            border-collapse: collapse;
            background-color: #fff;
            width: 100%;
            border: 1px solid #e7e7e7;
            margin-top: 10px;
            border-bottom: 1px solid #e7e7e7;
        }

        thead {
            height: 50px;
            vertical-align: middle;
            text-align: center;
            border-bottom: 1px solid #e7e7e7;


            th {
                color: #467cd4;
                font-size: 14px;
                text-align: center;
                line-height: 25px;
                border-right: 1px solid #e7e7e7;
                width: 5%;
            }

        }

        tbody {
            tr {
                border: none;
                cursor: default;
                font-weight: normal;

            }

            td {
                color: #333333;
                text-align: center;
                font-size: 12px;
                height: 42px;
                padding: 4px 4px;
                border-bottom: 1px solid #f1f1f1;
                line-height: 20px;
            }
        }
    }

}
</style>
